<template>
  <div class="supplier">
    <div class="search">
      <h1>供应商管理</h1>
      <el-input
        v-model="queryInfo.name"
        placeholder="供应商名称"
        style="width: 150px; margin-right: 16px"
        clearable
      ></el-input>

      <el-button type="primary" icon="el-icon-search" @click="getSupplier">搜索</el-button>
      <el-button type="primary" icon="el-icon-plus" @click="addSup"
        >添加供应商</el-button
      >
      <!-- 添加供应商弹窗 -->
      <el-dialog
        :title="type == 'create' ? '添加供应商' : '编辑供应商信息'"
        :visible.sync="addDialogFormVisible"
        center
      >
        <el-form :model="addform" :rules="addrules" ref="ruleform">
          <el-form-item
            label="供应商名称"
            :label-width="formLabelWidth"
            prop="name"
          >
            <el-input v-model="addform.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="供应商地址"
            :label-width="formLabelWidth"
            prop="address"
          >
            <el-input v-model="addform.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="供应商电话"
            :label-width="formLabelWidth"
            prop="phone_number"
          >
            <el-input
              v-model="addform.phone_number"
              autocomplete="off"
            ></el-input>
          </el-form-item>
         
          <el-form-item
            label="开户行"
            :label-width="formLabelWidth"
            prop="bank_id"
          >
            <el-select
              v-model="addform.bank_id"
              filterable
              placeholder="选择开户银行"
            >
              <el-option
                v-for="(value, key) in bankList"
                :key="Number(key)"
                :label="value"
                :value="Number(key)"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="银行卡号"
            :label-width="formLabelWidth"
            prop="bank_card"
          >
            <el-input v-model="addform.bank_card" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogFormVisible = false" style="color: white"
            >取 消</el-button
          >
          <el-button type="primary" @click="addSupplier('ruleform')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>

    <!-- 展示 -->
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }"
        height="450px"
      >
        <!-- 多选按钮 -->
        <el-table-column type="selection" width="30"> </el-table-column>
        <el-table-column
          type="index"
          :index="1 + (queryInfo.page - 1) * queryInfo.size"
          label="编号"
          width="60"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="name" label="供应商名称" width="120">
        </el-table-column>
        <el-table-column prop="address" label="供应商地址"> 
          <template slot-scope="scope">
            {{ scope.row.address?scope.row.address:'暂无' }}
          </template>
        </el-table-column>
        <el-table-column prop="phone_number" label="供应商电话" width="150">
          <template slot-scope="scope">
            {{ scope.row.phone_number?scope.row.phone_number:'暂无' }}
          </template>
        </el-table-column>
        <el-table-column prop="bank_id" label="开户行" width="130">
          <template slot-scope="scope">
            <span>{{ bankList[scope.row.bank_id]?bankList[scope.row.bank_id]:'暂无' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="bank_card" label="银行卡号" width="180">
          <template slot-scope="scope">
            {{ scope.row.bank_card?scope.row.bank_card:'暂无' }}
          </template>
           </el-table-column>
        <!-- <el-table-column prop="goods_num" label="交易数量" sortable width="100">
        </el-table-column> -->
        <el-table-column prop="total_sales" label="交易总金额(元)" sortable width="140">
        </el-table-column>
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <i
              class="icon-shanchu iconfont"
              style="color: red; margin-right: 5px"
              @click="deleteSupplier(scope.row.id)"
            ></i>
            <i
              class="icon-xiugai2 iconfont"
              style="color: #4064e1"
              @click="showUpdateDialog(scope.row)"
            ></i>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页组件 -->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[20, 30, 40, 50]"
        :page-size="queryInfo.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { addSupplier } from "../api/index";
import {
  getSupplierList,
  getSupplierDetail,
  createSupplier,
  editSupplier,
  delSupplier,
  batchDelSupplier,
} from "@/api/supplier";
import { getBank } from "@/api/common";

export default {
  data() {
    return {
      tableData: [],
      //所有银行信息
      bank: [],
      select: {
        supplier: "",
        address: "",
        goods: [],
      },
      total: 0,
      queryInfo: {
        page: 1,
        size: 20,
        name: "",
      },
      addform: {
        name: "",
        address: "",
        phone_number: "",
        bank_id: "",
        bank_card: "",
      },
      addrules: {
        name: [
          { required: true, message: "请输入供应商名称", trigger: "blur" },
        ],
        supplierAddress: [
          { required: true, message: "请供应商地址", trigger: "change" },
        ],
        supplierPhone: [
          {
            type: "date",
            required: true,
            message: "请输入供应商电话",
            trigger: "change",
          },
        ],
        supplierGoods: [
          {
            type: "date",
            required: true,
            message: "请输入供应商品",
            trigger: "change",
          },
        ],
        supplierBankId: [
          {
            type: "array",
            required: true,
            message: "开户行",
            trigger: "change",
          },
        ],
        supplierBankCount: [
          { required: true, message: "请输入银行卡号", trigger: "change" },
        ],
      },
      //显示/隐藏添加用户栏
      addDialogFormVisible: false,
      //表单宽度
      formLabelWidth: "120px",
      //修改用户信息
      updateForm: {
        supplierName: "",
        supplierAddress: "",
        supplierPhone: "",
        supplierGoods: "",
        supplierBankId: "",
        supplierBankCount: "",
        numberTrades: "",
        totalMoney: "",
      },
      //显示/隐藏修改用户栏
      updateDialogVisible: false,
      //修改表单验证
      updateFormRulues: {},
      currentBankId: "",
      type: "create",
      bankList:{},
      bankSelect:[]
    };
  },
  methods: {
    formatter(row, column) {
      return row.address;
    },
    handleSizeChange(newSize) {
      this.getSupplier();
      this.queryInfo.size = newSize;
      
    },
    handleCurrentChange(newPage) {
      this.getSupplier();
      this.queryInfo.page = newPage;
      
      
      // this.getVip();
    },
    //获取所有供应商
    async getSupplier() {
      getSupplierList(this.queryInfo).then((res) => {
        this.total = res.total;
        this.tableData = res.data;
      });
    },

    //添加供应商
    addSupplier(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addDialogFormVisible = false;
          if (this.type == "create") {
            createSupplier(this.addform).then(() => {
              this.$message.success("操作成功！");
              this.addform = {};
              this.getSupplier();
            });
          } else {
            editSupplier(this.addform.id,this.addform).then(() => {
              this.$message.success("操作成功！");
              this.updateDialogVisible = false;
              this.addform = {};
              this.getSupplier();
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //删除供应商
    async deleteSupplier(id) {
      const confirmResult = await this.$confirm(
        "此操作将会永久删除此供应商，是否继续？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult != "confirm") {
        return this.$message.info("已取消删除");
      }
      delSupplier(id).then(() => {
        this.$message.success("操作成功！");
        this.getSupplier();
      });
    },

    showUpdateDialog(currentData) {
      this.type = "update";
      this.addDialogFormVisible = true;
      getSupplierDetail(currentData.id).then((res) => {
        this.addform = res.data;
      });
    },
    addSup() {
      this.addDialogFormVisible = true;
      this.type = "create";
      this.addform = {};
    },
    closeUpdateDialog() {
      this.updateDialogVisible = false;
      this.getSupplier();
    }
  },
  created() {
    //获取所有供应商
    this.getSupplier();
    // this.getBank();
    getBank().then((res)=>{
      this.bankList = res;
      this.bankSelect = res
      
    })
  },
};
</script>

<style lang="less" scoped>

.el-table td.el-table__cell div{
  text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.supplier {
  margin: 0 10px;
}
h1 {
  font-size: 24px;
  font-weight: 400;
  padding-bottom: 10px;
  color: #565758;
}
.el-select {
  margin-right: 20px;
}
.search {
  .el-button {
    background-color: #4064e1;
    border: 0 !important;
  }
}

.table {
  margin-top: 40px;

  overflow: auto;
}
.el-table th.el-table__cell {
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: rgba(64, 100, 225, 0.5);
}
// 分页
.el-pagination {
  width: 400px;
  height: 100px;
  margin: 40px auto;
  button {
    background: #4064e1 !important;
  }
}
</style>
